<template>
<el-table
  ref="multipletable"
  class="chooseTable-tree"
  border
  :row-key="rowKey"
  :data="tableData"
  @select-all="selectAllFun"
  :row-class-name="rowClassNameFun"
  :header-row-class-name="headerRowClassName"
  @select="selectFun"
  :tree-props="treeProps"
>
  <el-table-column
    type="selection"
    width="55"
    :selectable="selectable"

  >
  </el-table-column>
  <el-table-column
    v-for="(item,index) in tableColumnArr"
    :key="index"
    :prop="item.prop"
    :label="item.label"
    :width="item.width"
  >
    <template slot-scope="scope">
      <div  v-if="item.hasOwnProperty('needTemplate')">{{getContentFunction(scope.row)}}</div>
      <div v-else>{{scope.row[item.prop]}}</div>
    </template>
  </el-table-column>

</el-table>
</template>

<script>
export default {
  name: 'cmsTableChoose',
  props: {
    rowKey: {
      type: String,
      default: 'id'
    },
    tableData: {
      type: Array,
      default: () => []
    },
    tableColumnArr: {
      type: Array,
      default: () => []
    },
    treeProps: {
      type: Object,
      default: {
        children: 'children'
      }
    },
    getContentFunction: {
      type: Function,
      default: () => {
        return ''
      },
    },
  },
  watch: {
    'detailId': {
      handler(val) {
      },
      deep: true
    },
    'tableData': {
      handler(val) {
        val.forEach(item=>{
          let flag=0
          item.children && item.children.forEach(child=>{
            if(this.selectedIds.indexOf(child.id)!=-1){
              child.isSelect=true;
              child.disabled=true;
              flag++
              this.$refs.multipletable.toggleRowSelection(child, true);
            }
          });
          if(flag>0 && flag<item.children.length){
            item.isSelect=''
          }else if(flag==item.children.length){
            item.isSelect=true
            this.$refs.multipletable.toggleRowSelection(item, true);
          }
        })
      },
      deep: true
    },
  },
  data(){
    return{
      renderDynamic: [],
      selectedIds: [],
    }
  },
  methods:{
    getChooseTreeData(){
      console.log(this.tableData)
      return this.tableData
    },
    // 判断是不是全选
    checkIsAllSelect() {
      let oneProductIsSelect = [];
      this.tableData.forEach((item) => {
        oneProductIsSelect.push(item.isSelect);
      });
      //判断一级产品是否是全选.如果一级产品全为true，则设置为取消全选，否则全选
      let isAllSelect = oneProductIsSelect.every((selectStatusItem) => {
        return true == selectStatusItem;
      });
      return isAllSelect;
    },
    // 全选或者全不选
    selectAllFun(selection) {
      let isAllSelect = this.checkIsAllSelect();
      this.tableData.forEach((item) => {
        item.isSelect = isAllSelect;
        this.$refs.multipletable.toggleRowSelection(item, !isAllSelect);
        this.selectFun(selection, item);
      });
    },
    selectFun(selection, row) {
      this.setRowIsSelect(row);
    },
    setRowIsSelect(row) {

      //当点击父级点复选框时，当前的状态可能为未知状态，所以当前行状态设为false并选中，即可实现子级点全选效果
      if (row.isSelect === "") {
        row.isSelect = false;
        this.$refs.multipletable.toggleRowSelection(row, true);
      }
      row.isSelect = !row.isSelect;
      //判断操作的是子级点复选框还是父级点复选框，如果是父级点，则控制子级点的全选和不全选
      if (row.children && row.children.length > 0) {
        if(!row.hasOwnProperty('fatherType')){
          //顶级节点  没有父级，全是子级
          this.clickFatherDealSon(row)
        }else{
          this.clickFatherDealSon(row)
          let parentType = row.fatherType;
          this.clickSonDealFather(this.tableData,parentType)
        }
        // 判断是否
        //即是父节点 也是 子节点
        // 先得处理子 再处理父节点



        /*row.children.forEach((item) => {
          if(!item.disabled){
            item.isSelect = row.isSelect;
            this.$refs.multipletable.toggleRowSelection(item, row.isSelect);
            if(item.children && item.children.length > 0){
              item.children.forEach((i,t)=>{
                if(!i.disabled){
                  i.isSelect = item.isSelect;
                  this.$refs.multipletable.toggleRowSelection(i, item.isSelect);
                }
              })
            }
          }
        });*/
      } else {
        //操作的是子节点  1、获取父节点  2、判断子节点选中个数，如果全部选中则父节点设为选中状态，如果都不选中，则为不选中状态，如果部分选择，则设为不明确状态
        let parentType = row.fatherType;
        this.clickSonDealFather(this.tableData,parentType)
       /* this.tableData.forEach((item) => {
          let isAllSelect = [];
          debugger
          if (item.type == parentType) {
            item.children.forEach((databaseSourceListItem) => {
              isAllSelect.push(databaseSourceListItem.isSelect);
            });
            if (
              isAllSelect.every((selectItem) => {
                return true == selectItem;
              })
            ) {
              item.isSelect = true;
              this.$refs.multipletable.toggleRowSelection(item, true);
            } else if (
              isAllSelect.every((selectItem) => {
                return false == selectItem;
              })
            ) {
              item.isSelect = false;
              this.$refs.multipletable.toggleRowSelection(item, false);
            } else {
              item.isSelect = "";
              this.$refs.multipletable.toggleRowSelection(item, false);
            }
          }else {

          }
        });*/
      }
    },
    clickFatherDealSon(data){
        data.children.forEach((item) => {
          if(!item.disabled){
            item.isSelect = data.isSelect;
            this.$refs.multipletable.toggleRowSelection(item, data.isSelect);
            if(item.children && item.children.length > 0){
              this.clickFatherDealSon(item)
            }
          }
        });
    },
    getSonData(){

    },
    dealFatherFather(data,parentType){
      data.forEach((item) => {
        let isAllSelect = [];
        if(item.type == parentType){

          let ocr = function(data) {
            let length = 0
            let lengthMax = data.length
            data.forEach((i,t)=>{
              isAllSelect.push(i.isSelect)
              length++
              if(length  == lengthMax){
                if(i.children&&i.children.length > 0){
                  ocr(i.children)
                }
              }
            })
            }

          if(item.children&&item.children.length > 0){
            ocr(item.children)
          }
          if (
            isAllSelect.every((selectItem) => {
              return true == selectItem;
            })
          ) {
            item.isSelect = true;
            this.$refs.multipletable.toggleRowSelection(item, true);
          } else if (
            isAllSelect.every((selectItem) => {
              return false == selectItem;
            })
          ) {
            item.isSelect = false;
            this.$refs.multipletable.toggleRowSelection(item, false);
          } else {
            item.isSelect = "";
            this.$refs.multipletable.toggleRowSelection(item, false);
          }

        }
      })
    },
    clickSonDealFather(data,parentType){
      data.forEach((item) => {
        let isAllSelect = [];

          if (item.type == parentType) {
            item.children.forEach((databaseSourceListItem) => {
              isAllSelect.push(databaseSourceListItem.isSelect);
            });
            if (
              isAllSelect.every((selectItem) => {
                return true == selectItem;
              })
            ) {
              item.isSelect = true;
              this.$refs.multipletable.toggleRowSelection(item, true);
            } else if (
              isAllSelect.every((selectItem) => {
                return false == selectItem;
              })
            ) {
              item.isSelect = false;
              this.$refs.multipletable.toggleRowSelection(item, false);
            } else {
              item.isSelect = "";
              this.$refs.multipletable.toggleRowSelection(item, false);
            }

            //处理完二级节点，开始处理一级
            if(item.hasOwnProperty('fatherType')){
              this.dealFatherFather(this.tableData,item.fatherType)
            }

        }else {
          if(item.children&&item.children.length > 0){
            this.clickSonDealFather(item.children,parentType)
          }
        }
      });
    },
    // 每行多选框不确定选择
    rowClassNameFun({ row }) {
      if (row.isSelect === "") {
        return "indeterminate";
      }
    },
    // 表头多选框不确定选择
    headerRowClassName({ row }) {
      let oneProductIsSelect = [];
      this.tableData.forEach((item) => {
        oneProductIsSelect.push(item.isSelect);
      });
      if (
        oneProductIsSelect.includes("") ||
        (oneProductIsSelect.includes(true) &&
          oneProductIsSelect.includes(false))
      ) {
        return "indeterminate";
      }
      return "";
    },
    selectable(row,rowIndex){
      if(this.selectedIds.indexOf(row.id)!=-1){
        return false
      }
      return true
    },
  },
}
</script>

<style lang="scss" scoped>
  ::v-deep .indeterminate {
    .el-table-column--selection .cell .el-checkbox {
      display: block !important;
    }
    .el-checkbox__input .el-checkbox__inner {
      background-color: #4a97eb !important;
      border-color: #4a97eb !important;
      color: #fff !important;
    }
  }
  ::v-deep .indeterminate .el-checkbox__input.is-checked .el-checkbox__inner::after {
    transform: scale(0.5);
  }
  ::v-deep .indeterminate .el-checkbox__input .el-checkbox__inner::after {
    border-color: #c0c4cc !important;
    background-color: #c0c4cc;
  }

  ::v-deep .indeterminate .el-checkbox__input .el-checkbox__inner::after {
    content: "";
    position: absolute;
    display: block;
    background-color: #fff;
    height: 2px;
    transform: scale(0.5);
    left: 0;
    right: 0;
    top: 5px;
    width: auto !important;
  }
</style>
